<template>
  <div class="ebook-slide-contents">
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="iconfont icon-search"></span>
        </div>
        <input type="text" class="slide-content-search-input" :placeholder="$t('book.searchHint')" @click="showSearchPage()">
      </div>
      <div class="slide-contents-search-cancel" v-if="searchVisible" @click="hideSearchPage()">{{$t("book.cancel")}}</div>
    </div>
    <div class="slide-contents-book-wrapper">
      <div class="slide-contents-book-img-wrapper">
        <img :src="cover" class="slide-contents-book-img">
      </div>
      <div class="slide-contents-book-info-wrapper">
        <div class="slide-contents-book-title">{{ metadata ? metadata.title : ''}}</div>
        <div class="slide-contents-book-author">{{ metadata ? metadata.creator : ''}}</div>
      </div>
      <div class="slide-contents-book-progress-wrapper">
        <div class="slide-contents-book-progress">
          <span class="progress">{{progress + '%'}}</span>
          <span class="progress-text">{{$t("book.haveRead2")}}</span>
        </div>
        <div class="slide-contents-book-time">{{getReadTimeText()}}</div>
      </div>
    </div>
    <scroll class="slide-contents-list" :top="156" :bottom="48" ref="scroll">
      <div class="slide-contents-item" v-for="(item, index) in navigation" :key="index">
        <span class="slide-contents-item-label" :class="{'selected' : section === index}" :style="contentItemStyle(item)" @click="displayNavigation(item.href)">{{item.label}}</span>
        <span class="slide-contents-item-page"></span>
      </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import { ebookMixin } from 'utils/mixin'
import Scroll from 'components/common/Scroll'
import { px2rem } from 'utils/utils'
export default {
  mixins: [ebookMixin],
  data() {
    return {
      searchVisible: false
    }
  },
  methods: {
    doSearch(q) {
      return Promise.all(
          this.currentBook.spine.spineItems.map(item => item.load(this.currentBook.load.bind(this.currentBook))
            .then(item.find.bind(item, q))
            .finally(item.unload.bind(item)))
      ).then(results => Promise.resolve([].concat.apply([], results)));
    },
    showSearchPage() {
      this.searchVisible = true
    },
    hideSearchPage() {
      this.searchVisible = false
    },
    contentItemStyle(item) {
      return {
        marginLeft: `${px2rem(item.level * 15)}rem`
      }
    },
    displayNavigation(href) {
      this.display(href)
      this.hideTitleAndMenu()
    }
  },
  mounted() {
    if (this.currentBook) {
      console.log(this.currentBook)
      this.currentBook.ready.then(() => {
      console.log('zhixingle22')
        this.doSearch('added').then(results => {
          console.log(results)
        })
      })
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang='scss' rel='stylesheet/scss' scoped>
@import '~assets/styles/global';
.ebook-slide-contents {
  font-size: 0;
  .slide-contents-search-wrapper {
    margin: px2rem(20) 0 px2rem(10) 0;
    padding: 0 px2rem(15);
    display: flex;
    width: 100%;
    height: px2rem(36);
    box-sizing: border-box;;
    .slide-contents-search-input-wrapper {
      flex: 1;
      display: flex;
      @include center;
      .slide-contents-search-icon {
        flex: 0 0 px2rem(28);
        font-size: px2rem(12);
        @include center;
      }
      .slide-content-search-input {
        flex: 1;
        width: 100%;
        height: px2rem(32);
        font-size: px2rem(14);
        background: transparent;
        border: none;
        &:focus {
          outline: none;
        }
      }
    }
    .slide-contents-search-cancel {
      flex: 0 0 px2rem(50);
      font-size: px2rem(14);
      @include right;
    }
  }
  .slide-contents-book-wrapper {
    padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
    display: flex;
    width: 100%;
    height: px2rem(90);
    box-sizing: border-box;
    .slide-contents-book-img-wrapper {
      flex: 0 0 px2rem(45);
      .slide-contents-book-img {
        width: px2rem(45);
        height: px2rem(60);
      }
    }
    .slide-contents-book-info-wrapper {
      padding: 0 px2rem(10);
      flex: 1;
      box-sizing: border-box;
      .slide-contents-book-title{
        // 375*0.85=318.75-30=288.75-20=268.75-45=223.75-70=153.75
        width: px2rem(153.75);
        line-height: px2rem(16);
        font-size: px2rem(14);
        @include ellipsis2(2);
      }
      .slide-contents-book-author {
        margin-top: px2rem(5);
        font-size: px2rem(12);
      }
    }
    .slide-contents-book-progress-wrapper {
      flex: 0 px2rem(70);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .slide-contents-book-progress {
        .progress {
          font-size: px2rem(14);
        }
        .progress-text {
          font-size: px2rem(12);
        }
      }
      .slide-contents-book-time {
        margin-top: px2rem(5);
        font-size: px2rem(12);
      }
    }
  }
  .slide-contents-list {
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-item {
      display: flex;
      padding: px2rem(20);
      box-sizing: border-box;
      .slide-contents-item-label {
        flex: 1;
        line-height: px2rem(16);
        font-size: px2rem(14);
        @include ellipsis;
      }
      .slide-contents-item-page {

      }
    }
  }
}
</style>
